<template>
  <div>
    <router-link to="Footerone">
      <img
        class="cha"
        src="https://image.hongbeibang.com/FvpCr89mpooArX7SM26_s5CqdeNL?imageMogr2/strip/thumbnail/640x640"
        alt=""
      />
    </router-link>
    <div class="img1">
      <img @click="toLogin"
        src="https://image.hongbeibang.com/Fnz_NOU0VlNn-t_hLcXFbatBze_C?imageMogr2/strip/thumbnail/640x640"
        alt=""
      />
      <p class="p1">上传食谱</p>
    </div>
    <div class="img2">
      <img @click="toLogin"
        src="https://image.hongbeibang.com/FtUJvHaECXwl58x67bktx4KSjnym?imageMogr2/strip/thumbnail/640x640"
        alt=""
      />
      <p class="p2">上传作品</p>
    </div>
      <div class="draft" @click="toLogin">草稿箱</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
      toLogin () {
          this.$router.push('/Login')
      }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.cha {
  width: 27px;
  height: 27px;
  margin-top: 9px;
  margin-left: 10px;
}
.img1 {
  // position: relative;

  img {
    width: 138px;
    height: 138px;
    position: absolute;
    left: 41.4px;
    // z-index: 3;

    bottom: 165px;
  }
  .p1 {
    position: absolute;
    bottom: 120px;
    font-weight: bold;
    color: powderblue;
    left: 75px;
  }
}
.img2 {
  // position: relative;

  img {
    width: 138px;
    height: 138px;
    position: absolute;
    left: 241.4px;
    // z-index: 3;

    bottom: 165px;
  }
  .p2{
        position:absolute;
        bottom: 120px;
        font-weight: bold;
        color: powderblue;
        right: 75px;;
    }
}
.draft {
  height: 54px;
  border-top: 2px solid;
  border-top-color: #e7e2e5;
  line-height: 54px;
  text-align: center;
  background-color: #fff;
  color: purple;
  font-weight: bold;
  position: fixed;
  bottom: 55px;
  right: 15px;
  left: 15px;
  z-index: 3;
  max-width: 100%;
}
</style>
